<template>
  <div class="my-posts-container">
    <h2>我的帖子</h2>
   <div v-if="loading" class="loading-state">
     <el-skeleton :rows="5" animated />
   </div>
   <div v-else-if="posts.length === 0" class="empty-state">
     <el-empty description="你还没有发布任何帖子"></el-empty>
     <el-button type="primary" @click="goToCreatePost">去发布</el-button>
   </div>
   <div v-else class="post-list">
     <!-- 简单的帖子列表项 -->
     <div v-for="post in posts" :key="post._id" class="post-item" @click="goToPostDetail(post._id)">
       <div class="post-cover" v-if="post.images && post.images.length > 0">
         <img :src="getImageUrl(post.images[0])" alt="帖子封面">
       </div>
       <div class="post-info">
         <h3 class="post-title">{{ post.title }}</h3>
         <p class="post-meta">发布于 {{ formatDate(post.createdAt) }}</p>
         <!-- 可以添加其他信息，如状态、浏览量等 -->
         <el-tag size="small" :type="post.isDraft ? 'info' : 'success'">
           {{ post.isDraft ? '草稿' : '已发布' }}
         </el-tag>
       </div>
     </div>
     <!-- TODO: 添加分页 -->
   </div>
  </div>
</template>

<script setup>
 // 后续将添加获取和显示用户帖子的逻辑
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
 import axios from '@/services/axios';
 import { useStore } from 'vuex';
import { ElMessage, ElEmpty, ElButton, ElSkeleton, ElTag } from 'element-plus'; // 引入所需组件
import { formatDate } from '@/utils/formatters'; // 假设有此工具函数

 const store = useStore();
const router = useRouter();
 const posts = ref([]);
 const loading = ref(false);
 const userId = computed(() => store.getters['auth/userId']);
 
 // 获取帖子数据的函数 (待实现)
 const fetchPosts = async () => {
   if (!userId.value) return;
   loading.value = true;
   try {
    // 调用后端接口获取用户发布的帖子（包括草稿）
    const response = await axios.get(`/api/posts/user/${userId.value}`, {
      // 移除 type: 'all' 参数，让后端根据用户身份决定返回内容
      // params: { type: 'all' } 
    });
    posts.value = response.data.posts || [];
   } catch (error) {
     console.error('获取帖子失败:', error);
    ElMessage.error('获取帖子列表失败');
   } finally {
     loading.value = false;
   }
 };
 
 onMounted(() => {
  fetchPosts(); // 组件挂载时获取帖子
 });

// 跳转到帖子详情页
const goToPostDetail = (postId) => {
  router.push(`/post/${postId}`);
};

// 跳转到创建帖子页面
const goToCreatePost = () => {
  router.push('/post/create'); // 假设创建帖子的路由是 /post/create
};

// 将相对路径转换为完整的图片 URL
const getImageUrl = (relativePath) => {
  if (!relativePath) return ''; // 如果没有路径，返回空字符串
  // 假设后端服务运行在 localhost:3000
  // 在生产环境中，应该使用配置的基础 URL
  const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000'; 
  return `${baseUrl}${relativePath}`;
}; 
 </script>
 
 <style scoped>
 .my-posts-container {
   padding: 20px;
 }
 h2 {
   margin-bottom: 20px;
 }
.loading-state,
.empty-state {
  margin-top: 40px;
  text-align: center;
}
.post-list {
  display: grid;
  gap: 20px;
}
.post-item {
  display: flex;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 15px;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}
.post-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.post-cover {
  width: 120px; /* 封面宽度 */
  height: 80px; /* 封面高度 */
  margin-right: 15px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f0f0f0;
}
.post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-info {
  flex-grow: 1;
}
.post-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 8px 0;
}
.post-meta {
  font-size: 13px;
  color: #909399;
  margin-bottom: 8px;
}
 </style>